<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body th:style="${'background-color:' + backgroundColor }">
<div style="margin: 30px auto 0 30px;">
    <div id="orderSection">
        <label>商品下单场景：</label>
        <form id="orderForm">
            <div>
                <label>用户ID</label>
                <input type="text" id="userId" name="userId" value="fox"/>
            </div>
            <div>
                <label>商品编号</label>
                <input type="text" id="commodityCode" name="commodityCode" value="1"/>
            </div>
            <div>
                <label>商品个数</label>
                <input type="number" name="count" value="1"/>
            </div>
            <button type="button" class="btnStart">提交</button>
        </form>
    </div>
    <div id="orderResultSection" style="margin-top: 30px; border-top: 1px solid #eaeaea;">
    </div>
</div>
<script charset="utf-8">
    $(".btnStart").click(function () {
        $('#orderResultSection').empty();
        var userId = $("#userId").val();
        var commodityCode = $("#commodityCode").val();
        $.ajax({
            url: "http://tlmall-gateway:18888/storage/",
            type: "get",
            dataType: "json",
            data: "commodityCode=" + commodityCode,
            async:false,
            success: function (res) {
                $('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务前商品库存： ${res.data} </p>`);
            }
        });
        $.ajax({
            url: "http://tlmall-gateway:18888/account/",
            type: "get",
            dataType: "json",
            data: "userId=" + userId,
            async:false,
            success: function (res) {
                $('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务前账户余额： ${res.data}</p>`);
            }
        });
        $.ajax({
            type: "POST",
            url: "http://tlmall-gateway:18888/order/create",
            data: $('#orderForm').serialize(),
            dataType: 'json',
            async:false,
            success: function (res) {
                $('#orderResultSection').append(`<p> [${getDateTime()}] ${res.message} </p>`);
                $.ajax({
                    url: "http://tlmall-gateway:18888/storage/",
                    type: "get",
                    dataType: "json",
                    data: "commodityCode=" + commodityCode,
                    async:false,
                    success: function (res) {
                        $('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务后商品库存： ${res.data}</p>`);
                    }
                });
                $.ajax({
                    url: "http://tlmall-gateway:18888/account/",
                    type: "get",
                    dataType: "json",
                    data: "userId=" + userId,
                    async:false,
                    success: function (res) {
                        $('#orderResultSection').append(`<p> [${getDateTime()}] 执行分布式业务后账户余额： ${res.data}</p>`);
                    }
                });
            }
        });
    });
    const getDateTime = () => {
        const myDate = new Date;
        const year = myDate.getFullYear();
        const month = myDate.getMonth() + 1;
        const date = myDate.getDate();
        const hours = myDate.getHours();
        const minutes = myDate.getMinutes();
        const seconds = myDate.getSeconds();
        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
    };

</script>
</body>
</html>
